<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
		<title>按钮</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style>
		.btn{
			display: inline-block;
			padding: 6px 12px;
			margin-bottom: 0;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.42857143;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			-ms-touch-action: manipulation;
			touch-action: manipulation;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select:none;
			background-image: none;
			border: 1px solid transparent;
			border-radius: 4px;
		}
		.btn-primary{
			color: #fff;
			background-color: #337ab7;
			border-color: #2e6da4;
		}
		
		</style>
		
	</head>
	<body>
		<div class="container">
			<!--使用Bootstrap的按钮样式非常简单，只需要在button只引入button对应的class即可-->
			<button class="btn">普通按钮.btn</button>
			<button class="btn btn-default">.btn-default</button>
			<button class="btn btn-primary">.btn-primary</button>
			<button class="btn btn-success">.btn-success</button>
			<button class="btn btn-info">.btn-info</button>
			<button class="btn btn-warning">.btn-warning</button>
			<button class="btn btn-danger">.btn-danger</button>
			<button class="btn btn-link">.btn-link</button>
			<br />
			<!--
				按钮的大小：
				如果Bootstrap提供的样式不满足用户的需求，开发人员无需重新编写代码，只需要修改对应的样式，按钮除了上述几种样式以外还能设置按钮的大小，Bootstrap默认的按钮大小有三种：.btn-lg大型 .btn-sm小型 .btn-xs超小型
			-->
			<button class="btn">普通按钮.btn</button>
			<button class="btn btn-default btn-lg">.btn-default</button>
			<button class="btn btn-primary btn-sm">.btn-primary</button>
			<button class="btn btn-success btn-xs btn-block">.btn-success</button>
			<!--
            	
            -->
            	按钮：<br />
            	<button type="button" class="btn btn-primary btn-lg">默认状态</button>
            	<button type="button" class="btn btn-primary btn-lg active">a活跃状态</button>
            	<button type="button" class="btn btn-lg btn-primary "disabled="disabled">禁用状态</button>
            	<br />
            	<hr />
            	超链接a:<br />
            	<a href="#" class="btn btn-primary btn-lg"role="button">默认状态</a>
            	<a href="#" class="btn btn-primary btn-lg active"role="button">活动状态</a>
            	<a href="#" class="btn btn-primary btn-xs disabled"role="button">禁用状态</a>
		</div>
	</body>
</html>
